import {Button, ColorPicker, Divider, Select} from '@arco-design/web-react';
import BackgroundFull from './components/BackgroundFull';
import sty from '@/style.module/editor/components/PaintingTool/StyleToolPanel.module.scss';

interface IBackgroundSlotEmit {
    changeFullType: (type: string) => void;
}
const BackgroundSlot: React.FC<IBackgroundSlotEmit> = (props) => {
    const [fullOptions] = useState([
        {label: '纯色填充', key: 'pure'},
        {label: '渐变填充', key: 'grandient'},
        {label: '图片填充', key: 'image'},
    ]);

    const [fullType, setFullType] = useState('pure');

    const changeFullType = (type: any) => {
        setFullType(type);
        props.changeFullType(type);
    };

    return (
        <Select value={fullType} onChange={changeFullType}>
            {fullOptions.map((option) => (
                <Select.Option key={option.key} value={option.key}>
                    {option.label}
                </Select.Option>
            ))}
        </Select>
    );
};

interface ICanvasSize {
    key: string;
    label: string;
}

export default function StyleToolPanel() {
    const [fullType, setFullType] = useState('pure');

    const changeFullType = (type: string) => {
        setFullType(type);
    };

    const [canvasSize, setCanvasSize] = useState('16/9');

    const [canvasSizeOptions] = useState<Array<ICanvasSize>>([
        {key: '16/9', label: '宽屏 16:9'},
        {key: '16/10', label: '宽屏 16:10'},
        {key: '4/3', label: '标准 4:3'},
    ]);

    const changeCanvasSize = (size: keyof ICanvasSize) => {
        setCanvasSize(size);
    };

    const [themeOperations] = useState([
        {color: '#d14424', background: '#ffffff', text: '#333333'},
        {color: '#42464b', background: '#ffffff', text: '#333333'},
        {color: '#5d82ba', background: '#ffffff', text: '#333333'},
        {color: '#005a6f', background: '#ffffff', text: '#333333'},
        {color: '#d0614c', background: '#dfb044', text: '#333333'},
        {color: '#86a1ad', background: '#dfdbd4', text: '#333333'},
        {color: '#697586', background: '#d5c4a4', text: '#333333'},
        {color: '#333333', background: '#7acfa6', text: '#333333'},
        {color: '#42464b', background: '#415065', text: '#ffffff'},
        {color: '#0c5999', background: '#35a2cd', text: '#ffffff'},
        {color: '#c49a41', background: '#8c4357', text: '#ffffff'},
        {color: '#dfaa00', background: '#2e4e7d', text: '#ffffff'},
        {color: '#d1ad88', background: '#f99070', text: '#ffffff'},
        {color: '#464d52', background: '#657984', text: '#ffffff'},
        {color: '#ffcfb6', background: '#1e4c6f', text: '#ffffff'},
        {color: '#c3a043', background: '#43292a', text: '#ffffff'},
        {color: '#464d52', background: '#60546f', text: '#ffffff'},
        {color: '#df9636', background: '#5b89a0', text: '#ffffff'},
        {color: '#b898a4', background: '#93716b', text: '#ffffff'},
        {color: '#c47a11', background: '#187db1', text: '#ffffff'},
        {color: '#333333', background: '#759564', text: '#ffffff'},
        {color: '#355b5e', background: '#424b50', text: '#ffffff'},
        {color: '#d29090', background: '#942a32', text: '#ffffff'},
        {color: '#00cfdf', background: '#3b434d', text: '#ffffff'},
        {color: '#424246', background: '#c70042', text: '#ffffff'},
        {color: '#2e4155', background: '#b35d44', text: '#ffffff'},
        {color: '#11bfce', background: '#8f98aa', text: '#ffffff'},
        {color: '#333333', background: '#549688', text: '#ffffff'},
    ]);

    return (
        <section>
            <p className={sty.title}>背景填充</p>
            <BackgroundFull fullType={fullType}>
                <BackgroundSlot changeFullType={changeFullType} />
            </BackgroundFull>
            <Divider />
            <div className={sty.flexKeyv}>
                <span>画布尺寸:</span>
                <Select
                    className={sty.value}
                    value={canvasSize}
                    onChange={changeCanvasSize}
                >
                    {canvasSizeOptions.map((option) => (
                        <Select.Option key={option.key} value={option.key}>
                            {option.label}
                        </Select.Option>
                    ))}
                </Select>
            </div>
            <Divider />
            <p className={sty.title}>全局主题</p>
            <div className={sty.columnFlexContainer}>
                <div className={sty.flexKeyv}>
                    <span>字体样式:</span>
                    <Select
                        className={sty.value}
                        value={canvasSize}
                        onChange={changeCanvasSize}
                    >
                        {canvasSizeOptions.map((option) => (
                            <Select.Option key={option.key} value={option.key}>
                                {option.label}
                            </Select.Option>
                        ))}
                    </Select>
                </div>
                <div className={sty.flexKeyv}>
                    <span>字体颜色:</span>
                    <ColorPicker
                        defaultValue={'#165DFF'}
                        showPreset
                        showText
                        className={sty.value}
                    />
                </div>
                <div className={sty.flexKeyv}>
                    <span>主题颜色:</span>
                    <ColorPicker
                        defaultValue={'#165DFF'}
                        showPreset
                        showText
                        className={sty.value}
                    />
                </div>
            </div>
            <Divider />
            <p className={sty.title}>预置主题</p>
            <div className={sty.presetTheme}>
                {themeOperations.map((theme, index) => {
                    return (
                        <div
                            className={sty.themeCard}
                            style={{
                                backgroundColor: theme.background,
                            }}
                            key={index}
                        >
                            <div
                                className={sty.text}
                                style={{
                                    color: theme.text,
                                }}
                            >
                                Aa
                            </div>
                            <div
                                className={sty.ele}
                                style={{
                                    backgroundColor: theme.color,
                                }}
                            ></div>
                        </div>
                    );
                })}
            </div>
            <Button type='outline' className={sty.full}>
                应用主题到全部
            </Button>
        </section>
    );
}
